<template>
    <div class="energy-card" :style="cardStyle">
        <div class="card-icon" :style="iconStyle">
            <svg viewBox="0 0 24 24" class="icon-svg">
                <path :d="iconPath" fill="currentColor"/>
            </svg>
        </div>
        <div class="card-content">
            <div class="card-label">{{ label }}</div>
            <div class="card-value">
                <span class="value">{{ value }}</span>
                <span class="unit">{{ unit }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'EnergyCard',
    props: {
        // 卡片类型
        type: {
            type: String,
            required: true,
            validator: value => ['comprehensive', 'electricity', 'water', 'gas', 'compressed_air', 'heat', 'cold'].includes(value)
        },
        // 标签文字
        label: {
            type: String,
            required: true
        },
        // 数值
        value: {
            type: [String, Number],
            required: true
        },
        // 单位
        unit: {
            type: String,
            required: true
        },
        // 自定义背景色
        backgroundColor: {
            type: String,
            default: ''
        },
        // 自定义图标颜色
        iconColor: {
            type: String,
            default: ''
        }
    },
    computed: {
        // 预定义的颜色配置
        colorConfig() {
            const configs = {
                comprehensive: {
                    backgroundColor: '#E3F2FD',
                    borderColor: '#2196F3',
                    iconColor: '#2196F3'
                },
                electricity: {
                    backgroundColor: '#FFF8E1',
                    borderColor: '#F7BA2A',
                    iconColor: '#F7BA2A'
                },
                water: {
                    backgroundColor: '#E3F7FF',
                    borderColor: '#1890FF',
                    iconColor: '#1890FF'
                },
                gas: {
                    backgroundColor: '#F6FFED',
                    borderColor: '#52C41A',
                    iconColor: '#52C41A'
                },
                compressed_air: {
                    backgroundColor: '#F9F0FF',
                    borderColor: '#722ED1',
                    iconColor: '#722ED1'
                },
                heat: {
                    backgroundColor: '#FFF2E8',
                    borderColor: '#FA541C',
                    iconColor: '#FA541C'
                },
                cold: {
                    backgroundColor: '#E6FFFB',
                    borderColor: '#13C2C2',
                    iconColor: '#13C2C2'
                }
            }
            return configs[this.type] || configs.comprehensive
        },

        // 卡片样式
        cardStyle() {
            const bgColor = this.backgroundColor || this.colorConfig.backgroundColor
            const borderColor = this.colorConfig.borderColor

            return {
                backgroundColor: bgColor,
                borderColor: borderColor
            }
        },

        // 图标样式
        iconStyle() {
            const iconColor = this.iconColor || this.colorConfig.iconColor
            return {
                color: iconColor,
                borderColor: iconColor
            }
        },

        // 图标路径
        iconPath() {
            const icons = {
                comprehensive: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z",
                electricity: "M11,4L13,4L13,6L11,6L11,4M11,1L13,1L13,3L11,3L11,1M15.39,4.39L16.8,2.98L17.98,4.16L16.57,5.57L15.39,4.39M6.02,4.16L7.2,2.98L8.61,4.39L7.43,5.57L6.02,4.16M3,11L5,11L5,13L3,13L3,11M19,11L21,11L21,13L19,13L19,11M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M15.5,14L20.5,9H17V6.5L9.5,14H13V16.5L15.5,14Z",
                water: "M12,2C13.1,2 14,2.9 14,4C14,5.1 13.1,6 12,6C10.9,6 10,5.1 10,4C10,2.9 10.9,2 12,2M21,9V7L15,1L13.5,2.5L16.17,5.17L10.5,10.84L11.92,12.25L15,9.17L18.5,12.67V15H21V12.67L17.5,9.17L21,9M1,18V16L9.5,7.5L11.92,9.92L5.83,16H11V18H1Z",
                gas: "M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7.5,19 17,8 17,8Z",
                compressed_air: "M12,2A6,6 0 0,1 18,8A6,6 0 0,1 12,14A6,6 0 0,1 6,8A6,6 0 0,1 12,2M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4M12,15.5A2.5,2.5 0 0,1 14.5,18A2.5,2.5 0 0,1 12,20.5A2.5,2.5 0 0,1 9.5,18A2.5,2.5 0 0,1 12,15.5Z",
                heat: "M17.66,11.2C17.43,10.9 17.15,10.64 16.89,10.38C16.22,9.78 15.46,9.35 14.82,8.72C13.33,7.26 13,4.85 13.95,3C13.05,3.13 12.18,3.5 11.4,4.08C8.95,6 8.03,9.6 9.23,12.39C8.39,12.51 7.55,12.82 6.78,13.35C5.24,14.41 4.25,16.04 4.09,17.76C4.09,17.77 4.09,17.78 4.09,17.79C4.07,18.73 4.38,19.63 4.94,20.35C5.5,21.07 6.33,21.52 7.26,21.61C8.19,21.7 9.13,21.42 9.81,20.8C10.5,20.18 10.87,19.3 10.84,18.37C10.81,17.45 10.4,16.58 9.7,16C9.01,15.42 8.12,15.14 7.19,15.22C6.26,15.31 5.42,15.75 4.84,16.45C4.55,16.8 4.34,17.21 4.23,17.65C4.46,16.18 5.27,14.86 6.5,14.02C7.15,13.61 7.85,13.34 8.58,13.2C9.74,15.12 11.7,16.42 14.03,16.76C16.35,17.1 18.7,16.44 20.42,14.95C18.97,15.88 17.21,16.3 15.5,16.15C13.8,16 12.25,15.28 11.14,14.11C9.84,12.75 9.26,10.86 9.57,9.05C10.13,8.8 10.68,8.46 11.21,8.04C11.86,7.53 12.5,6.93 13.11,6.26C13.96,6.91 14.5,8.15 14.3,9.36C14.22,9.9 14.06,10.42 13.82,10.9C14.61,11.27 15.37,11.75 16.07,12.36C16.58,12.84 17.04,13.38 17.43,13.96C17.44,13.75 17.44,13.54 17.43,13.33C17.47,12.64 17.59,11.94 17.66,11.2Z",
                cold: "M12,2A7,7 0 0,1 19,9C19,10.95 18.2,12.69 16.92,13.92L21,18L18,21L13.92,16.92C12.69,18.2 10.95,19 9,19A7,7 0 0,1 2,12A7,7 0 0,1 9,5C10.95,5 12.69,5.8 13.92,7.08L18,3L21,6L16.92,10.08C18.2,11.31 19,13.05 19,15M9,7A5,5 0 0,0 4,12A5,5 0 0,0 9,17A5,5 0 0,0 14,12A5,5 0 0,0 9,7Z"
            }
            return icons[this.type] || icons.comprehensive
        }
    }
}
</script>

<style lang="scss" scoped>
.energy-card {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    min-height: 80px;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    .card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        border: 2px solid;
        margin-right: 16px;
        flex-shrink: 0;
        background-color: rgba(255, 255, 255, 0.8);

        .icon-svg {
            width: 28px;
            height: 28px;
        }

    }

    .card-content {
        flex: 1;
        min-width: 0;

        .card-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 4px;
            font-weight: 500;
        }

        .card-value {
            display: flex;
            align-items: baseline;

            .value {
                font-size: 24px;
                font-weight: bold;
                color: #333;
                margin-right: 4px;
            }

            .unit {
                font-size: 14px;
                color: #999;
                font-weight: normal;
            }
        }
    }
}

// 综合能耗特殊样式
.energy-card.comprehensive {
    .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;

        .icon-svg {
            width: 32px;
            height: 32px;
        }
    }
}
</style>
